// 静态属性，样式属性，剥离数据 多种屏幕尺寸都事先部署好
import echarts from 'echarts'
const staticOption = {
  tooltip: {
    show: true,
    formatter: '{a} <br/> {c}'
  },
  legend: {
    data: [],
    left: 'center',
    top: '5%',
    itemHeight: 7,
    itemWidth: 20,
    itemGap: 10,
    textStyle: {
      color: '#bad3ff',
      fontSize: 20
    }
  },
  series: []
}

const staticOptionMid = {
  tooltip: {
    show: true,
    formatter: '{a} <br/> {c}'
  },
  legend: {
    data: [],
    left: 'center',
    top: '5%',
    itemHeight: 7,
    itemWidth: 20,
    itemGap: 10,
    textStyle: {
      color: '#bad3ff',
      fontSize: 16
    }
  },
  series: []
}

// 备选颜色，有需求则进行循环
// const colors = ['#007bff', '#ffcf6a']
//
// 渐变色轨迹不同，分别设置
const gradientColors = [
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#9654e4'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#c290f2'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#0ab5fd'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#26d6fe'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#1ac2a6'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#48ddcc'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#8ae267'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#baf0a0'
  }
  ], false)),
  (new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
    // 0% 处的颜色
    offset: 0,
    color: '#ffcf6a'
  }, {
    // 100% 处的颜色
    offset: 1,
    color: '#ffe5a1'
  }
  ], false))]

let colorIndex = 0

// 获取设备宽度
const screen = window.screen.width

class ChartFactory {
  constructor (additionalOptions) {
    // 根据屏幕宽度获取不同配置的echarts配置
    this.option = staticOption
    if (screen < 1920 && screen > 1200) {
      this.option = staticOptionMid
    }
    colorIndex = 0
    // 下方复制属于浅拷贝，指向同个内存，针对可能有更改的需求，要进行一次清理
    this.clear()
    additionalOptions.seriesData.forEach((p1) => {
      this.option.legend.data.push(p1.name)
      this.option.series.push({
        name: p1.name,
        type: 'pie',
        startAngle: 180,
        label: {
          normal: {
            show: false,
            position: 'center'
          }
        },
        itemStyle: {
          color: gradientColors[colorIndex]
        },
        hoverAnimation: false,
        radius: p1.radius,
        center: ['50%', '95%'],
        data: [{
          value: p1.value,
          name: 'trueData'
        }, {
          value: (p1.value / (p1.percentage / 2) * 0.5 - p1.value),
          name: 'fillData',
          silent: true,
          itemStyle: {
            color: '#05388f',
            opacity: 0.3
          }
        }, {
          value: p1.value / (p1.percentage / 2) * 0.5,
          name: 'invisibleData',
          silent: true,
          itemStyle: {
            normal: {
              color: 'rgba(0,0,0,0)',
              label: {
                show: false
              },
              labelLine: {
                show: false
              }
            },
            emphasis: {
              color: 'rgba(0,0,0,0)'
            }
          }
        }]
      })
      colorIndex += 1
    })
  }

  // 清理方法，要将部署的新数据全部置空
  clear () {
    this.option.legend.data = []
    this.option.series = []
  }

  getOption () {
    return this.option
  }
}

export { ChartFactory }
